<template>
	<view class="box">
		
		<view id="video" v-if="info.video" :style="{height: height + 'px'}">
			<VideoVue :src="info.video" :imgUrl="info.video + '?x-oss-process=video/snapshot,t_0,f_jpg'" ref="video" />
		</view>
		<rich-text :nodes="nodes"></rich-text>
		<view class="lingqu" @click="golingqu" v-if="cardlength==0">领取名片</view>
	</view>
</template>

<script>
	import VideoVue from '@/components/video/video.vue'
	import {
		InformationHelpContent,InformationBusinessCardList
	} from '@/common/http/api.js'
	export default {
		components:{
			VideoVue
		},
		data() {
			return {
				nodes: '',
				id: '',
				info: '',
				width: 0,
				height: 0,
				videoWidth: 0,
				cardlength:0
			};
		},
		onLoad(e) {
			this.id = e.id
			InformationHelpContent({
				id: e.id
			}).then(res => {
				this.nodes = res.data.content
				this.info = res.data
				if (this.info.video) {
					this.getDivWidth()
					
				}
			})
			InformationBusinessCardList().then(res=>{
				this.cardlength=res.data.length
			})
		},
		onShareAppMessage() {
			return {
				title: this.info.name,
				path: '/pagesA/aboutUs/aboutUs?id=' + this.id
			};
		},
		// onShareTimeline() {
		// 	return {
		// 		path: '/pagesA/aboutUs/aboutUs?id=' + this.id
		// 	};
		// },
		//收藏
		onAddToFavorites(res) {
			return {
				query: `is_mixin_collect=2&id=${this.id}`
			};
		},
		methods: {
			golingqu(){
				uni.navigateTo({
					url:"/pagesA/findInterest/findInterest"
				})	
			},
			getDivWidth() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#video').boundingClientRect(res => {
						if (res) {
							console.log('div 的宽度为：', res.width);
							this.videoWidth = res.width
							this.handleSetImageStyle(this.info.video + '?x-oss-process=video/snapshot,t_0,f_jpg').then(({
								width,
								height
							}) => {
								console.log('width,height=>', width, height)
								console.log('systemInfo', this.$store.state.systemInfo)
								this.setImageInfo({
									width,
									height
								})
							})
						}
					}).exec();
				})
			},
			//js 简写
			async handleSetImageStyle(src) {
				// 由于方法是异步的，渲染时高度会不生效，所以要加await
				let imageInfoObj = await uni.getImageInfo({
					src
				})

				// 取到图片的宽高
				let {
					width,
					height
				} = imageInfoObj[1]

				return {
					width,
					height
				}
			},
			setImageInfo({
				width,
				height
			}) {
				const maxWidth = this.videoWidth;
				this.width = maxWidth
				this.height = (height * maxWidth / width).toFixed(2)
				console.log('width,height11=>', this.width, this.height)

			}
		}
	}
</script>

<style lang="scss">
	.box {
		width: 100%;
		box-sizing: border-box;
		padding: 24rpx;
	}
	#video {
		width: 100%;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}
	.lingqu{
		position: fixed;
		width: 670rpx;
		left: 40rpx;
		bottom: 30rpx;
		border-radius: 30rpx;
		height: 80rpx;
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>